<template>
  <section class="component bill-survey">
    <el-form :rules="rules" :model="model" ref="bill-survey" label-width="90px">
      <el-form-item label="调账类型" prop="recType">
        <el-select v-model="model.recType" placeholder="请选择" clearable>
          <el-option v-for="{index,name,code} in $dict.getDictData('AccountAdjustment')" :key="index" :label="name" :value="code"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="调账金额" prop="recMoney">
        <el-input type="input" v-model="model.recMoney"></el-input>
      </el-form-item>
      <el-form-item>
        <span>调账金额为需要调整的金额，正数为增加，负数为减少</span>
      </el-form-item>
      <el-form-item label="调整原因" prop="recReason">
        <el-input type="textarea" v-model="model.recReason" :maxlength="300" show-word-limit></el-input>
      </el-form-item>
    </el-form>
    <div class="operate-buttons">
      <el-button @click="commitCheck">确定</el-button>
      <el-button @click="close">取消</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Dependencies } from '~/core/decorator';
import { Emit, Prop, Watch } from 'vue-property-decorator';
import { Getter } from 'vuex-class';
import { OutsourceReconciliationManageService } from "~/services/domain-service/outsource-reconciliation-manage.service";

@Component({})
export default class BillSurvey extends Vue {
  @Dependencies(OutsourceReconciliationManageService)
  private outsourceReconciliationManageService: OutsourceReconciliationManageService;

  @Prop({type: Object, required: true}) private rowData;

  private model: any = {
    recType: '',
    recMoney: '',
    recReason: '',
  };
  private rules: any = {
    recType: [{ required: true, message: '请选择调账类型', trigger: 'change' }],
    recMoney: [{ required: true, message: '请输入调账金额', trigger: 'blur' }],
    recReason: [{ required: true, message: '请输入调账原因', trigger: 'blur' }],
  };

  @Emit('refreshData')
  private refreshData() { }

  @Emit('close')
  private close() {
    this.reset();
  }
  
  private reset() {
    const form: any = this.$refs['bill-survey'];
    form.resetFields();
  }

  private commitCheck() {
    const form: any = this.$refs['bill-survey'];

    form.validate((valid) => {
      if (!valid) return
      const query = {
        adjustmentAmount: this.model.recMoney,
        accountAdjustment: this.model.recType,
        applyDescription: this.model.recReason,
        caseIds: [this.rowData.id],
        confirm: 1, // 确认
      }
      this.outsourceReconciliationManageService.accountAdjustment(query).subscribe(
        data => {
          this.$message.success('申请成功!');
          this.refreshData();
          this.close();
        }
      );
    });
  }
}
</script>

<style lang="less" scoped>
</style>
